<!--
 * @Author: WangSir 3036970150@qq.com
 * @Date: 2022-11-24 11:48:11
 * @LastEditors: WangSir 3036970150@qq.com
 * @LastEditTime: 2022-11-25 18:30:28
 * @FilePath: \vue_express\src\pages\layoutPage\header\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex" class="Header">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue;font-size: 20px; ">宠物医院管理系统</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
        <span class="el-dropdown-link">
          <!-- <el-avatar :size="30"  style="position: relative; top: 10px"></el-avatar> -->
          <span style="position: relative; top: -2px; color:dodgerblue; font-weight:bold">{{username}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="$router.push('/layoutPage/userInfoPage')">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="$router.push('/layoutPage/changePasswordPage')">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="loginOut()">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
 name: 'Header',
 data(){
 return {}
 },
 computed:{
  username(){
    let user = JSON.parse(sessionStorage.getItem('user'))
    return user.username
    //return this.$store.state.user.username
  }
 },
 components: {},
 created(){},
 mounted(){
 },
 methods: {
  loginOut(){
    console.log("执行登出")
    this.$router.replace('/loginPage')
    sessionStorage.removeItem("user")
    // sessionStorage.removeItem("token")
  }
 }
}
</script>
<style scoped>
.el-dropdown-link{
  display: flex;
  align-items:center;
  justify-content:center;
}
i{
  bottom: 0;
  color:dodgerblue;
}
</style>
